let $ = (el) => document.querySelector(el),
    box = $('.box'),
    count = $('.count'),
    rubBox = $('.rubbishBox'),
    divs = [...box.querySelectorAll('p')];

    console.log(divs)

divs.forEach((p,idx) => {
    p.addEventListener('mousedown',(e) => {
        let flag = false,
            // 记录光标距浏览器窗口的距离
            x = e.offsetX,
            y = e.offsetY,
            // 记录p刚开始在的位置
            posX = p.offsetLeft,
            posY = p.offsetTop;
        document.addEventListener('mousemove',(e1) =>{
            if(flag) return;
            // 记录光标距离box的距离
            let l = e1.clientX - box.offsetLeft,
                t = e1.clientY - box.offsetTop;
            p.style.left = l + 'px';
            p.style.top = t + 'px'; 
        })
        document.addEventListener('mouseup',()=>{
            flag = true;
            // 获取垃圾站的位置信息和鼠标放开时p的位置信息
            let info = rubBox.getBoundingClientRect(),
                disX = p.offsetLeft + box.offsetLeft,
                disY = p.offsetTop + box.offsetTop;
            if(disX > info.left && disX < info.right && disY > info.top && disY < info.bottom){
                p.remove();
                count.innerHTML = count.innerHTML*1 + 1;
            }else{
                // 将p放回原来位置
                p.style.left = x + 'px';
                p.style.top = y + 'px';
            }
        })
    })
   
})